<template>
  <div class="loginfrom-box">
    <slot name="title">
      <div class="from-title">
        <span>旅行社</span>
        <span>账号登录</span>
      </div>
    </slot>

    <slot name="LoginFrom">
      <div class="loginform">
        <input
          class="input"
          v-model="loginForm.phone"
          @blur="changePhone"
          type="text"
          placeholder="手机号"
        />
        <input
          class="input"
          type="text"
          v-model="loginForm.code"
          placeholder="验证码"
          @blur="verifyCode"
        />
        <span class="verify" @click.stop="btn_verify"> 获取验证码 </span>

        <div class="passwbox">
          <input
            class="input"
            :type="passw"
            v-model="loginForm.password"
            @blur="onBlur"
            placeholder="设置密码"
            @keyup.enter="submitBtn"
          />
          <span class="passw_icon" :class="icon" @click.stop="showPass"></span>
        </div>

        <input
          class="invite"
          type="text"
          @keyup.enter="submitBtn"
          placeholder="优惠邀请码（选填）"
        />

        <!-- 按钮层 -->
        <span class="loginBtn" @click.stop="submitBtn1">立即注册</span>
      </div>
    </slot>

    <!-- 底部链接 -->
    <slot name="bottom-title">
      <div class="btn-a">
        <label
          ><input type="checkbox" :checked="checked" @click="clickCheck" />
          <span>阅读并同意《滴咚个游旅行社协议》</span></label
        >
        <router-link class="registe" to="/login">已有账号立即登录</router-link>
      </div>
    </slot>
  </div>
</template>

<script>
import register_mixin from "@/mixins/register_mixin.js";

export default {
  mixins: [register_mixin],
  props: ["checked"],
  data() {
    return {
      ischecked: false,
      passw: "password",
      icon: "el-input__icon el-icon-view",
    };
  },
  methods: {
    clickCheck() {
      this.ischecked = !this.ischecked;
      this.$emit("checkedFun", this.ischecked);
    },
  },
};
</script>

<style lang='less'>
div.loginfrom-box {
  width: 340px;
  padding-bottom: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);

  width: 340px;
  padding-bottom: 30px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 15px;

  .verify {
    outline: none;
    border: none;
    right: 60px;
    cursor: pointer;
    color: #07c160;
    background-color: none;
    width: 80px;
    top: 160px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
  }
  div.passwbox {
    position: relative;
    & > input.input {
      border-top: none;
      border-radius: 0px;
      margin-bottom: 0px;
    }
    span.passw_icon {
      height: 40px;
      position: absolute;
      top: 0;
      right: 20px;
      cursor: pointer;
    }
  }
  .btn-a {
    label:first-child {
      position: relative;
      top: -10px;
      user-select: none;
      cursor: pointer;
      padding: 4px 0;
      display: block;
      color: #aaaaaa;
      span {
        position: relative;
        top: -2px;
        padding-left: 10px;
      }
    }
  }
  .loginform {
    font-size: 14px;
    margin: 0 auto;
    width: 240px;
  }
  .invite,
  input.input {
    &:first-of-type {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      border-top: 1px solid #ccc;
    }
    overflow: hidden;
    user-select: none;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    width: 240px;
    border: 1px solid #ccc;
    border-top: none;
    padding: 0 10px;
    font-size: 14px;

    outline: none;
    &:last-of-type {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      margin-bottom: 30px;
    }
  }
  .loginBtn {
    user-select: none;
    width: 240px;
    cursor: pointer;
    height: 40px;
    display: block;
    background-color: #07c160;
    border-radius: 4px;
    line-height: 40px;
    color: #fff;
    margin-bottom: 20px;
  }
  .disabled {
    user-select: none;
    width: 240px;
    height: 40px;
    display: block;
    background-color: #ccc;
    border-radius: 4px;
    line-height: 40px;
    color: #fff;
    margin-bottom: 20px;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ccc;
  }
  .from-title {
    line-height: 90px;
    span {
      font-size: 24px;
    }
    span:first-child {
      font-weight: 500;
    }
    span:last-child {
      display: inline-block;
      letter-spacing: 2px;
      text-indent: 10px;
      font-weight: 200;
    }
  }

  .btn-a {
    font-size: 12px;
    .registe {
      color: rgba(17, 146, 17, 0.74);
    }
    .reset {
      color: #aaaaaa;
    }
    .reset,
    .registe {
      text-decoration: none;
      margin: 0 4px;
    }
  }
}
</style>